<!--
 * @Description: 字体图标组件
 * @Pramas: iconName 图标名称 className 图标样式
 * @Author: 黄勇
 * @Date: 2019-07-19 10:28:03
 * @LastEditTime: 2020-03-18 22:46:15
 * @LastEditors: 黄勇
 -->

<template>
        <div
            :class="[
                'imgWrapper',
                { 'show-border': isShowBorder },
                { 'show-shadow': isShowShadow },
                { 'bg-contain': isBgContain },
                { 'fill-width': isFillWidth },
                { 'fill-height': isFillHeight }
            ]"
            ref="back"
            :style="{
                backgroundImage: 'url(' + defaultImgSrc + ')'
            }"
        >
            <img
                class="imgWrapper__image"
                alt
                @error="errorImg"
                :src="imgSrc"
                ref="image"
                @load="loadImage"
            />
            <slot />
        </div>
</template>

<script>

export default {
    name: "AppIcon",
    components: {},
    props: {
        src: {
            type: String
        },
        defaultImg: {
            type: String,
            default: "logo_grey.png"
        },
        alt: {
            type: String,
            default: ""
        },
        isShowBorder: {
            type: Boolean,
            default: false
        },
        isShowShadow: {
            type: Boolean,
            default: false
        },
        isBgContain: {
            type: Boolean,
            default: false
        },
        isFillWidth: {
            type: Boolean,
            default: false
        },
        isFillHeight: {
            type: Boolean,
            default: false
        }
    },

    data() {
        return {};
    },
    computed: {
        imgSrc() {
            if (this.src && this.src.indexOf("`") > -1) {
                return encodeURI(this.src);
            }
            return this.src;
        },

        className() {
            return !this.src && "default-img";
        },
        defaultImgSrc() {
            return require("@/assets/images/" + this.defaultImg);
        }
    },
    methods: {
        loadImage() {
            if (this.$refs.back && this.src) {
                this.$refs.back.style.backgroundImage = "url()";
            }
        },
        errorImg() {
             this.$refs.image.style.display = "none";
        }
    },
    mounted() {
        let _this = this;
        // this.$Lazyload.$on("loaded", function(listener) {
        //     if (
        //         _this.$refs.image &&
        //         _this.$refs.image.attributes &&
        //         _this.$refs.image.attributes.lazy &&
        //         _this.$refs.image.attributes.lazy.value === "loaded"
        //     ) {
        //         _this.$refs.back.style.backgroundImage = "url()";
        //     }
        // });
    },
    watch: {
        src: function(val) {
            this.$refs.back.style.backgroundImage =
                "url(" + require("../../assets/images/logo_grey.png") + ")";
        }
    }
};
</script>
<style lang='scss' scoped>
.c-img {
    width: 100%;
    height: 100%;
}

.imgWrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: 50% 45%;
    background-size: 100px;
    overflow: hidden;

    image {
        max-height: 100%;
        max-width: 100%;
    }
}

@b imgWrapper.show-border {
    overflow: visible;
    flex-direction: column;
    border: 1px solid #c5c5c5;
}

@b imgWrapper.show-border .imgWrapper__image {
    overflow: hidden;
}
@b imgWrapper.show-shadow {
    box-shadow: 0 0 4px 0 #c5c5c5;
}
@b imgWrapper.bg-contain {
    background-size: contain;
}
@b imgWrapper.fill-width {
    align-items: flex-start;
}
@b imgWrapper.fill-width .imgWrapper__image {
    width: 100%;
    max-height: none;
    height: auto;
}

@b imgWrapper.fill-height {
    justify-content: flex-end;
    overflow: hidden;
}
@b imgWrapper.fill-height .imgWrapper__image {
    height: 100%;
    max-width: none;
    width: auto;
}
</style>